<template>
  <view class="orderAdd">
    <uv-navbar title="派单新增" titleStyle="color:#fff" leftIconColor="#fff" bgColor="#1071E7" @leftClick="leftClick"
      placeholder>
    </uv-navbar>
    <view style="width: 100%;height: 20rpx;background: #F7F8FA;"></view>
    <view class="block">
      <view class="block-title">
        客户信息
      </view>
      <view class="block-item">
        <view class="label">
          客户名称
        </view>
        <input type="text" class="ipt" v-model="formLine.connect_name" placeholder-class="styles" placeholder="请输入">
      </view>
      <view class="block-item" @click="handleChoose">
        <view class="label">
          所在区域
        </view>
        <text class="styles" :class="address?'ipt':''">{{address?address:'请选择'}}</text>
      </view>
      <view class="block-item" @click="openPicker2">
        <view class="label">
          联系类型1
        </view>
        <text class="styles" :class="connect_type_name?'ipt':''">{{connect_type_name?connect_type_name:'请选择'}}</text>
      </view>
      <view class="block-item">
        <view class="label">
          联系方式1
        </view>
        <input type="text" class="ipt" maxlength="20" v-model="formLine.connect_information" placeholder-class="styles"
          placeholder="请输入">
      </view>
      <view class="block-item" @click="openPicker22">
        <view class="label">
          联系类型2
        </view>
        <text class="styles" :class="connect_type_name2?'ipt':''">{{connect_type_name2?connect_type_name2:'请选择'}}</text>
      </view>
      <view class="block-item">
        <view class="label">
          联系方式2
        </view>
        <input type="text" class="ipt" maxlength="20" v-model="formLine.connect_information_two" placeholder-class="styles"
          placeholder="请输入">
      </view>
      <!-- 			<view class="block-item">
				<view class="label">
					客户项目
				</view>
				<text class="styles">请选择</text>
			</view> -->
      <!-- 			<view class="block-item" @click="openPicker3">
				<view class="label">
					客户来源
				</view>
				<text class="styles" :class="source_type_name?'ipt':''">{{source_type_name?source_type_name:'请选择'}}</text>
			</view> -->
      <view class="block-item" @click="openPicker">
        <view class="label">
          派单区域
        </view>
        <text class="styles" :class="receive_area_name?'ipt':''">{{receive_area_name?receive_area_name:'请选择'}}</text>
      </view>
      <view class="block-item" @click="openPicker4" v-if="receive_area_name && isSeller == '1'">
        <view class="label">
          指定商务
        </view>
        <text class="styles" :class="receiveName?'ipt':''">{{receiveName?receiveName:'请选择'}}</text>
      </view>
    </view>
    <view style="width: 100%;height: 20rpx;background: #F7F8FA;"></view>
    <view class="block">
      <view class="block-title">
        其他信息
      </view>
      <view class="remakeInfo">
        <view class="remakeInfo-title">
          <text class="txt1">备注</text>
          <text class="txt2">{{formLine.source_remark.length}}/300</text>
        </view>
        <textarea placeholder="请输入" maxlength="300" class="ipt textarea" v-model="formLine.source_remark"
          placeholder-class="styles"></textarea>
      </view>
    </view>
    <view class="block">
      <view class="block-title" style="margin-bottom: 20rpx;">
        上传聊天记录（{{formLine.source_images.length}}/9)
      </view>
      <UploadImgs :imgList="imgList" keyName="source_images" @getUrl="getUrl" />
    </view>
    <view style="width: 100%;height: 176rpx;"></view>
    <view class="footer">
      <view class="btn" @click="onSave">
        立即派单
      </view>
    </view>
    <uv-picker ref="picker" :columns="columns" keyName="title" @confirm="confirm"></uv-picker>
    <uv-picker ref="picker2" :columns="columns2" keyName="title" @confirm="confirm2"></uv-picker>
    <uv-picker ref="picker22" :columns="columns2" keyName="title" @confirm="confirm22"></uv-picker>
    <uv-picker ref="picker4" :columns="column4" keyName="name" @confirm="confirm4"></uv-picker>
    <uv-picker ref="picker3" :columns="columns3" keyName="title" @confirm="confirm3"></uv-picker>
    <uv-popup ref="popup" :closeOnClickOverlay="false">
      <view class="dialog">
        <view class="dialog-title">
          客服重复
        </view>
        <view class="dialog-warpp">
          <view class="dialog-warpp-item">
            <view class="label">
              电话：
            </view>
            <view class="value">
              {{repeatData.connect_information}}
            </view>
          </view>
          <view class="dialog-warpp-item">
            <view class="label">
              客户名称：
            </view>
            <view class="value">
              {{repeatData.connect_name}}
            </view>
          </view>
          <view class="dialog-warpp-item">
            <view class="label">
              创建时间：
            </view>
            <view class="value">
              {{repeatData.created_at}}
            </view>
          </view>
          <view class="dialog-warpp-item">
            <view class="label">
              接单人：
            </view>
            <view class="value">
              {{repeatData.receive_username}}
            </view>
          </view>
        </view>
        <view class="foot-btn" @click="handleOk">
          确定
        </view>
      </view>
    </uv-popup>
    <uv-picker ref="picker5" :columns="addressList" @change="change" keyName="name" @confirm="confirm5">
    </uv-picker>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        formLine: {
          source_images: [],
          receive_area_id: "",
          connect_name: "",
          connect_type: "",
          connect_type_two: "",
          connect_information: "",
          connect_information_two: "",
          source_type: "",
          source_remark: "",
          receive_uid: "",
          province_code: "",
          city_code: ""
        },
        address: "", //省市
        receiveName: "", //指派商务
        receive_area_name: "",
        connect_type_name: "",
        connect_type_name2: "",
        source_type_name: "",
        columns: [],
        column4: [],
        // 联系类型
        columns2: [
          [{
              title: "电话",
              id: 1
            },
            {
              title: "微信",
              id: 2
            },
            {
              title: "QQ",
              id: 3
            },
            {
              title: "其他",
              id: 4
            }
          ]
        ],
        // 来源
        columns3: [
          [{
              title: "淘宝",
              id: 1
            },
            {
              title: "百度",
              id: 2
            },
            {
              title: "自拓",
              id: 3
            },
            {
              title: "其他",
              id: 4
            }
          ]
        ],
        repeatData: {
          connect_information: "",
          connect_name: "",
          created_at: "",
          receive_username: "",
        },
        isSeller: "",
        provinces: [], //省
        citys: [], //市
        areas: [], //区
        pickerValue: [0, 0],
        defaultValue: [110000, 110100],
        prevIndex: 0
      }
    },
    onLoad() {
      this.getDeptList();
      this.getConfig();
      this.getArea();
    },
    computed: {
      addressList() {
        return [this.provinces, this.citys];
      }
    },
    methods: {
      getArea() {
        reqApi.areaList({}).then(res => {
          console.log("地区数据", res);
          const {
            data
          } = res;
          console.log('获取的数据：', res);
          this.provinces = data.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1));
          console.log("provinces1", this.provinces);
          this.handlePickValueDefault();
          setTimeout(() => {
            this.loading = false;
          }, 200)
        })
      },
      handleChoose() {
        this.$refs.picker5.open();
        this.handlePickValueDefault();
      },
      confirm5(e) {
        console.log('确认选择的地区：', e);
        this.formLine.province_code = e.value[0].code;
        this.formLine.city_code = e.value[1].code;
        this.address = `${e.value[0].name}/${e.value[1].name}`;
      },
      handlePickValueDefault() {
        // 设置省
        this.pickerValue[0] = this.provinces.findIndex(item => Number(item.code) === this.defaultValue[0]);
        // 设置市
        this.citys = this.provinces[this.pickerValue[0]]?.children || [];
        this.pickerValue[1] = this.citys.findIndex(item => Number(item.code) === this.defaultValue[1]);
        // // 设置区
        // this.areas = this.citys[this.pickerValue[1]]?.children || [];
        // this.pickerValue[2] = this.areas.findIndex(item => Number(item.code) === this.defaultValue[2]);
        // 重置下位置
        this.$refs.picker.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]], true);
        console.log("省", this.provinces);
        console.log("市", this.citys);
        console.log("区", this.areas);
      },
      change(e) {
        if (this.loading) return;
        console.log("切换", e);
        const {
          columnIndex,
          index
        } = e
        // 改变了省
        if (columnIndex === 0) {
          this.prevIndex = index;
          this.citys = this.provinces[index]?.children || []
          // this.areas = this.citys[0]?.children || []
          this.$refs.picker.setIndexs([index, 0, 0])
        } else if (columnIndex === 1) {
          // this.areas = this.citys[index]?.children || []
          this.$refs.picker.setIndexs([this.prevIndex, index, 0])
        }
      },
      getConfig() {
        reqApi.config({}).then(res => {
          console.log("系统参数", res);
          this.isSeller = res.data.dispatch_specific_seller;
        })
      },
      getSellerList() {
        reqApi.sellerList({
          organize_id: this.formLine.receive_area_id
        }).then(res => {
          this.column4 = [
            [...res.data]
          ];
          console.log("商务列表", this.column4);
        })
      },
      handleOk() {
        this.$refs.popup.close();
      },
      leftClick() {
        uni.navigateBack({
          delta: 1
        })
      },
      onSave() {
        if (!this.formLine.connect_name) {
          uni.showToast({
            title: "请输入客户名称",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.connect_type_name) {
          uni.showToast({
            title: "请选择联系类型",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.formLine.connect_information) {
          uni.showToast({
            title: "请输入联系方式1",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.receive_area_name) {
          uni.showToast({
            title: "请选择派单区域",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        // if (this.formLine.source_images.length == 0) {
        //   uni.showToast({
        // 	title: "请上传聊天记录",
        // 	icon: 'none',
        // 	mask: true,
        // 	duration: 1500,
        //   })
        //   return
        // }
        reqApi.createOrder(this.formLine).then(res => {
          uni.showToast({
            title: "发布成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/order/orderList"
            })
          }, 1500)
        }).catch(err => {
          console.log("客服重复", err.data);
          if (err.code == 200407) {
            this.repeatData = err.data;
            console.log("repeatData", this.repeatData);
            this.$refs.popup.open('center');
          } else {
            uni.showToast({
              icon: "none",
              title: res.data.message
            });
          }
        })
      },
      getDeptList() {
        reqApi.deptList({}).then(res => {
          console.log("部门列表", res);
          this.columns.push(res.data);
        })
      },
      confirm4(e) {
        console.log('confirm', e);
        const {
          id,
          name
        } = e.value[0];
        this.formLine.receive_uid = id;
        this.receiveName = name;
      },
      confirm(e) {
        console.log('confirm', e);
        const {
          id,
          title
        } = e.value[0];
        this.formLine.receive_area_id = id;
        this.receive_area_name = title;
        this.getSellerList();
      },
      confirm2(e) {
        console.log('confirm', e);
        const {
          id,
          title
        } = e.value[0];
        this.formLine.connect_type = id;
        this.connect_type_name = title;
      },
      confirm22(e) {
        console.log('confirm', e);
        const {
          id,
          title
        } = e.value[0];
        this.formLine.connect_type_two = id;
        this.connect_type_name2 = title;
      },
      confirm3(e) {
        console.log('confirm', e);
        const {
          id,
          title
        } = e.value[0];
        this.formLine.source_type = id;
        this.source_type_name = title;
      },
      openPicker() {
        this.$refs.picker.open();
      },
      openPicker2() {
        this.$refs.picker2.open();
      },
      openPicker22() {
        this.$refs.picker22.open();
      },
      openPicker3() {
        this.$refs.picker3.open();
      },
      openPicker4() {
        this.$refs.picker4.open();
      },
      getUrl(e) {
        console.log("子组件传过来的", e);
        const {
          keyName,
          arr
        } = e;
        this.formLine[keyName] = arr;
      },
    }
  }
</script>
<!-- placeholder-class 使用scoped不生效 -->
<style>
  .styles {
    flex: 1;
    text-align: right;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #AAAAAA;
  }
</style>
<style lang="scss" scoped>
  .textarea {
    padding: 20rpx 0;
    box-sizing: border-box;
  }

  .remakeInfo {
    padding: 40rpx 0;
    box-sizing: border-box;
    border-bottom: 2rpx solid #eee;

    .remakeInfo-title {
      display: flex;
      justify-content: space-between;

      .txt1 {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
      }

      .txt2 {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #969799;
      }
    }
  }

  .block {
    background: #fff;
    padding: 0 30rpx;
    box-sizing: border-box;

    .block-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #333333;
      margin-top: 36rpx;
    }

    .block-item {
      height: 104rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      border-bottom: 2rpx solid #eee;

      .label {
        color: #333333;
      }

      .ipt {
        color: #333333;
        flex: 1;
        text-align: right;
      }

    }
  }

  .dialog {
    width: 600rpx;
    padding: 48rpx 28rpx 0 28rpx;
    box-sizing: border-box;

    .dialog-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #1071E7;
      text-align: center;
    }

    .dialog-warpp {
      margin: 50rpx 0;

      .dialog-warpp-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;

        .label {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #969799;
        }

        .value {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #323233;
        }
      }
    }

    .foot-btn {
      width: 100%;
      height: 88rpx;
      background: #1071E7;
      border-radius: 44rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 88rpx;
    }
  }

  .textareaIpt {
    width: 100%;
    padding: 24rpx 0;
    box-sizing: border-box;
    border-bottom: 2rpx solid #eee;
  }

  .block-warp {
    .block-warp-tp {
      display: flex;
      justify-content: space-between;

      .tp-fl {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #323233;
      }

      .tp-fr {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #969799;
      }
    }
  }


  .orderAdd {
    width: 100vw;
    height: 100vh;
    background: #fff;

  }
</style>